<template>
	<view class="main">
		<gui-a-header title="招聘会" bg="transparent"></gui-a-header>
		<view class="list">
			<view class="item flex-dc cfff" style="background: linear-gradient(270deg, #FF8160 0%, #FF4A4A 100%);" @click="jumpXszp">
				<text class="title"><text class="f46">线上</text>招聘会</text>
				<text class="desc">查看官方公众号招聘信息</text>
				<text class="en f40">ONLINE JOB FAIR</text>
			</view>
			<view class="item flex-dc cfff" style="background: linear-gradient(270deg, #7BBCFF 0%, #0097C7 100%);" @tap="$u.to(`/pages/recruit/recruit-list`)">
				<text class="title"><text class="f46">线下</text>招聘会</text>
				<text class="desc">查看平台发布的招聘会信息，支持在线报名</text>
				<text class="en f40">OFFLINE JOB FAIR</text>
			</view>
			<view class="item flex-dc cfff" style="background: linear-gradient(270deg, #28DB7E 0%, #01BD5D 100%);" @tap="$u.to(`/pages/recruit/recruit-list?type=my`)">
				<text class="title"><text class="f46">我的</text>招聘会</text>
				<text class="desc">查看我参与报名的招聘会记录</text>
				<text class="en f40">MY JOB FAIR</text>
			</view>
		</view>
		<image class="bg" src="../../static/recruit/recruit_bg.png" mode="widthFix"></image>
	</view>
	
</template>

<script setup>
	import {
		ref,
		reactive,
		inject
	} from 'vue';
	const $u = reactive(inject('$u'))
	
	const jumpXszp = () => {
		$u.to(`/pages/recruit/online-recruit-list`)
		// $u.to(`/pages/webView/webView?pagetype=2`)
	}
</script>

<style lang="scss" scoped>
	.main {
		background: linear-gradient(180deg, #0034C7 0%, #4072FE 100%);
	}

	.list {
		padding: 20rpx 59rpx 0 59rpx;

		.item {
			position: relative;
			height: 198rpx;
			border-radius: 14rpx;
			padding: 35rpx 0 0 38rpx;
			margin-top: 22rpx;
			.desc{
				margin-top: 5rpx;
			}
			.en{
				position: absolute;
				right: 20rpx;
				bottom: 10rpx;
				opacity: .3;
			}
		}
	}
	.bg{
		width: 750rpx;
		margin-top: 30rpx;
	}
</style>